import { ref, Ref, unref } from 'vue'
import { ElMessage } from 'element-plus'

type ClipboardValue = Ref<string> | undefined

interface ClipboardHooks {
  text: ClipboardValue
  copy: (showMessage?: boolean) => void
  isSupported: boolean
  cut: () => void
  // paste: () => void
}

/**
 * @description 剪贴板使用的hooks
 * @author jinzz
 * @param clipboardValue Ref<string>
 * @returns { ClipboardHooks } { text: Ref<string>, copy: Function, isSupported: Boolean, cut: Function }
 * @FIXME: 剪切使用时需要将text绑定到某个支持双向绑定的地方，才可以使用剪切效果，我只是将她复制后清空了
 * @TODO: 我想实现剪切、复制、粘贴的监听回掉，但是因为函数内不能注册onunmonent，我又不太想在不使用的时候也注册事件，所以暂时先不开放
 * @example
 * import { useClipboard } from '@hooks/useClipboard'
 * const { copy } = useClipboard(ref(props.code))
 * cliclkHandler(() => copy())
 * 
 * 
 * 关于兼容：
 *  支持除Safari之外的所有现代浏览器
 */
export function useClipboard(clipboardValue: ClipboardValue): ClipboardHooks {
  const text: Ref<string> = clipboardValue || ref('')
  const isSupported: boolean = !!document.queryCommandSupported('copy') || !!navigator.clipboard

  const copy = (showMessage = true) => {
    if (showMessage && !isSupported) {
      ElMessage.warning('当前浏览器不支持复制，请升级或更换浏览器。')
      return
    }
    const input = document.createElement('input')
    input.style.position = 'absolute'
    input.style.opacity = '0'
    input.value = unref(text) || ''
    document.body.appendChild(input)
    input.focus();
    input.select();
    if (navigator.clipboard) {
      navigator.clipboard.writeText(unref(text))
    } else {
      document.execCommand('copy')
    }
    input.remove()
  }

  const cut = () => {
    if (!isSupported) {
      ElMessage.warning('当前浏览器不支持剪贴，请升级或更换浏览器。')
      return
    }
    copy(false)
    text.value = ''
  }

  // FIXME: 这里因为函数内不能注册onunmonent，我又不太想在不使用的时候也注册事件，所以暂时先不开放
  // const getClipboardValue = async () : Promise<string> => {
  //   let result = ''
  //   try {
  //     result = await navigator.clipboard.readText();
  //   } catch (e) {
  //     const input = document.createElement('input');
  //     input.style.position = 'absolute';
  //     input.style.left = '-9999px';
  //     document.body.appendChild(input);
  //     input.focus();
  //     if (document.execCommand('paste')) {
  //       result = input.value;
  //     }
  //     document.body.removeChild(input);
  //   }
  //   return result
  // }

  // const handleCopy = (cb: (text: string) => any) => {
  //   const copy = async () => {
  //     const text= await getClipboardValue()
  //     cb(text)
  //   }
  //   document.addEventListener('copy', copy)
  //   onUnmounted(() => {
  //     document.removeEventListener('copy', copy)
  //   })
  // }
  // const handleCut = (cb: (text: string) => any) => {
  //   const cut = async () => {
  //     const text= await getClipboardValue()
  //     cb(text)
  //   }
  //   document.addEventListener('cut', cut)
  //   onUnmounted(() => {
  //     document.removeEventListener('cut', cut)
  //   })
  // }
  // const handlePaste = (cb: (text: string) => any) => {
  //   const paste = async () => {
  //     const text= await getClipboardValue()
  //     cb(text)
  //   }
  //   document.addEventListener('paste', paste)
  //   onUnmounted(() => {
  //     document.removeEventListener('paste', paste)
  //   })
  // }
  return {
    text,
    copy,
    isSupported,
    cut
  }
}
